<style scoped lang="scss">
header {
    position: sticky;
    top: 0;
    z-index: 99;
}

.describe {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    span {
        width: 100px;
        height: 40px;
        background-color: #ccc;
        line-height: 40px;
        text-align: center;
    }
}

.bu {
    width: 96%;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 20px;

    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}

.chat {
    width: 100%;
    height: 530px;
    background-color: #f2f2f2;
    display: flex;
    position: relative;
}

.left {
    width: 50%;
    height: 530px;
}

.right {
    width: 50%;
    height: 530px;
}

.zuo {
    height: 30px;
    display: flex;
    margin-top: 60px;
}
.zuo img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.zuo div {
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.you {
    height: 40px;
    display: flex;
    margin-top: 30px;
    flex-direction: row-reverse;
}

.you div {
    background-color: #fff;
    border-radius: 5px;
    height: 40px;
    // overflow-y: scroll;
    padding: 5px;
    width: 100%;
    line-height: 25px;
}

.you img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .btm {
        width: 100%;
        height: 40px;
        display: flex;
        background-color: #f2f2f2;
        border-top: 1px solid #f1f1f1;
        align-items: center;

        span {
            padding: 5px 12px;
            background-color: #fff;
            border-radius: 20px;
            margin: 0 8px;
            display: flex;
            align-items: center;

            img {
                width: 20px;
                height: 20px;
                margin: 0 1px;
            }
        }
    }

    .bottom {

        width: 100%;
        // text-align: center;
        display: flex;
        height: 70px;
        background-color: #f1f1f1;
        align-items: center;
        padding: 0 2px;
        input {
            width: 80%;
            height: 35px;
            border: 1px solid paleturquoise;
            padding-left: 10px;
            margin-left: 10px;
        }

        button {
            width: 60px;
            height: 35px;
            border-radius: 10px;
            border: none;
            background-color: paleturquoise;
            margin-left: 10px;
            font-size: 16px;
            font-weight: 900;
            color: #fff;
        }
    }

}
</style>

<template>
    <div>
        <header>
            <van-nav-bar title="医生就诊" left-arrow @click-left="$router.go(-1)" />
            <van-notice-bar color="#1989fa" background="#fff" left-icon="info-o">
                剩余15条赠送的免费消息可发送
            </van-notice-bar>
        </header>
        <div class="chat">
            <div class="left">
                <div className='zuo' v-for="(message, index) in messages" :key="index">
                    <img src='../../assets/A3 (1).png' />
                    <div style="width: 100%;">{{ message }}</div>
                </div>

            </div>
            <div class="right">
                <div className='you' v-for="(messages1, index) in messages1" :key="index">
                    <img
                        src='https://ts1.cn.mm.bing.net/th?id=OIP-C.VnqbqHI999-VVVkUOWBcMwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2' />
                    <div>
                        <!-- <h2 style="display: flex;align-items: center;color: blueviolet;"> <img style="width: 30px;height: 30px;" src="../../assets/111.png" alt=""> 复诊开方申请</h2>
                        <p> <span style="font-size: 12px;color: #666;">问诊人</span>&emsp;李恒 男  21岁</p>  -->
                        <!-- 发送的信息 -->
                         {{ messages1 }}
                        <!-- <p> <span style="font-size: 12px;color: #666;">病情描述: </span>&emsp;医生您好，我已线下就诊，诊断为“人乳头瘤病毒感染”，
                            使用过申请药品且无过敏或不良反应，病情稳定无变化 </p>
                        <p> <span style="font-size: 12px;color: #666;">申请用药</span> 奥司他韦颗粒 * 1 </p> -->
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="btm"> <span @click="$router.push('/more')"> <img src="../../assets/111.png" alt=""> 复诊开方</span> 
                <span><img
                        src="../../assets/222.png" alt=""> 送锦旗</span> <span> <img src="../../assets/333.png" alt="">
                    更多</span> </div>
            <div class="bottom">
                <van-icon name="photo-o" style="font-size: 22px;margin: 0 2px;" />
                <van-icon name="smile-o" style="font-size: 22px;margin: 0 2px;"  />
                <input v-model="newMessage" placeholder="请输入您想咨询的内容" />
                <button @click="sendMessage">
                    发 送
                </button>
            </div>
        </footer>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
const messages = ref([])
const newMessage = ref('')
const messages1 = ref([])
const websocket = ref()
const useList=ref([])

// 获取就诊人
const getUser= async ()=>{
    const res=await axios.get('/api/user/list')
    useList.value=res.data.data
    console.log(useList.value);
}
getUser()

// 聊天
const connectWebSocket = () => {
    websocket.value = new WebSocket('ws://123.60.213.46:8000')
    websocket.value.onmessage = (event:any) => {
        console.log(event);
        messages.value.push(event.data as never)
    }
}

connectWebSocket()

const sendMessage = () => {
    if (newMessage.value) {
        websocket.value.send(newMessage.value)
        messages1.value.push(newMessage.value as never)
        newMessage.value = ''
    }
}


</script>